<template>
  <div>
    <div class="mui-numbox" data-numbox-min="1">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input
        id="test"
        class="mui-input-numbox"
        type="number"
        :value="initCount"
        @change="countChanged"
        ref="numbox"
        readonly
      />
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>
<script>
import mui from '../../lib/js/mui.min.js'
export default {
  props: ['initCount', 'goodsid'],
  mounted () {
    mui('.mui-numbox').numbox()
  },
  methods: {
    countChanged () {
      // 数量改变
      // 每次更新时把最新的数量值同步到store中，覆盖之前的数量值
      this.$store.commit('updateGoodsInfo', { id: this.goodsid, count: this.$refs.numbox.value })
    }
  }
}
</script>
<style lang="css" scoped>
.mui-numbox {
  height: 22px;
}
</style>
